<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>状态管理</title>
    <link rel="stylesheet" href="../styles/statusManager.css">
</head>
<body>
    <div class="status-manager-container">
        <h2>工位状态管理</h2>
        
        <div class="status-section">
            <h3>当前状态</h3>
            <div class="current-status-display">
                <span id="current-status-badge" class="status-badge">工作中</span>
            </div>
        </div>
        
        <div class="status-section">
            <h3>预设状态</h3>
            <div class="status-list" id="default-status-list">
                <!-- 默认状态将通过JavaScript动态添加 -->
            </div>
        </div>
        
        <div class="status-section">
            <h3>自定义状态</h3>
            <div class="status-list" id="custom-status-list">
                <!-- 自定义状态将通过JavaScript动态添加 -->
            </div>
            
            <div class="add-status-form">
                <h4>添加新状态</h4>
                <input type="text" id="new-status-name" placeholder="状态名称" maxlength="20">
                <input type="color" id="new-status-color" value="#28a745">
                <input type="text" id="new-status-desc" placeholder="描述（可选）" maxlength="50">
                <button id="add-status-btn">添加状态</button>
            </div>
        </div>
        
        <div class="status-actions">
            <button id="close-status-manager">关闭</button>
        </div>
    </div>
    
    <script src="../src/statusManagerRenderer.js"></script>
</body>
</html>